<template>
  <div class="board-container">
    <div class="board-title">能碳系统演示</div>

    <div class="board-content">
      <!-- 时段数据卡片 -->
      <el-row :gutter="20" class="mb20">
        <el-col v-for="(item, index) in timeData" :key="index" :span="6">
          <div class="content-status">
            <div class="box-title">{{ item.period }}</div>
            <div class="data-item">
              <div class="text-gradient">{{ item.power }}kWh</div>
              <div>标煤比 {{ item.coal }}t</div>
              <div>同比 {{ item.compare }}%</div>
              <div>费用占比 {{ item.cost }}%</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 筛选区域 -->
      <el-form :inline="true" class="filter-form">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="车间">
          <el-select v-model="selectedWorkshop" clearable>
            <el-option
              v-for="item in workshopOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="gradient-btn" @click="handleReset">重置</el-button>
          <el-button type="primary" class="gradient-btn" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 图表区 -->
      <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <div class="content-chart">
            <div class="box-title">尖峰平谷电量图</div>
            <div ref="barChart" class="chart-container"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="content-chart">
            <div class="box-title">尖峰平谷电费图</div>
            <div ref="lineChart" class="chart-container"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      timeData: [
        { period: '尖时段', power: 8951.43, coal: 3.201, compare: 504.13, cost: 47.76 },
        { period: '峰时段', power: 6543.21, coal: 2.345, compare: 320.45, cost: 32.18 },
        { period: '平时段', power: 4321.09, coal: 1.876, compare: 210.67, cost: 15.43 },
        { period: '谷时段', power: 2109.87, coal: 0.987, compare: 98.76, cost: 4.63 }
      ],
      dateRange: ['2025-05-01', '2025-05-31'],
      selectedWorkshop: '',
      workshopOptions: [
        { value: 1, label: '焦化车间' },
        { value: 2, label: '炼钢车间' }
      ]
    }
  },
  mounted() {
    this.initBarChart()
    this.initLineChart()
  },
  methods: {
    initBarChart() {
      const chart = echarts.init(this.$refs.barChart)
      const option = {
        xAxis: { data: Array.from({length:31}, (_,i) => `${i+1}日`) },
        yAxis: { type: 'value' },
        series: [
          { name: '尖', type: 'bar', stack: '总量', color: '#FF0000' },
          { name: '峰', type: 'bar', stack: '总量', color: '#FFFF00' },
          { name: '平', type: 'bar', stack: '总量', color: '#90EE90' },
          { name: '谷', type: 'bar', stack: '总量', color: '#006400' }
        ]
      }
      chart.setOption(option)
    },
    initLineChart() {
      const chart = echarts.init(this.$refs.lineChart)
      const option = {
        xAxis: { data: Array.from({length:31}, (_,i) => `${i+1}日`) },
        yAxis: { type: 'value' },
        series: [
          { name: '尖', type: 'line', color: '#FF0000' },
          { name: '峰', type: 'line', color: '#FFFF00' },
          { name: '平', type: 'line', color: '#90EE90' },
          { name: '谷', type: 'line', color: '#006400' }
        ]
      }
      chart.setOption(option)
    },
    handleSearch() {
      // 查询逻辑
    },
    handleReset() {
      this.dateRange = ['2025-05-01', '2025-05-31']
      this.selectedWorkshop = ''
    }
  }
}
</script>

// 在原有代码基础上调整样式部分
<style scoped>
.board-container {
  background-image: url("~@/assets/images/board-bg.png");
  background-size: 100% 100%;
  height: 100vh;
  color: #fff;
}

.board-title {
  background-image: linear-gradient(to top, #2571e9, #00e7ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 40px;
  padding: 20px 0;
  text-align: center;
}

.content-status {
  background-image: url("~@/assets/images/box-bg1.png");
  background-size: 100% 100%;
  padding: 15px;
  margin-bottom: 20px;
}

.box-title {
  font-size: 16px;
  color: #01d1ff;
  margin-bottom: 10px;
}

.box-title::before {
  content: " ";
  width: 4px;
  height: 16px;
  background: linear-gradient(to bottom, #00d1ff, #2869e8);
  display: inline-block;
  margin-right: 8px;
}

.chart-container {
  height: 400px;
  background: rgba(28, 37, 80, 0.8);
  padding: 15px;
  margin-top: 15px;
}

.filter-form {
  background: rgba(28, 37, 80, 0.8);
  padding: 20px;
  border-radius: 4px;
  margin: 20px 0;
}
</style>

.gradient-btn {
  background: linear-gradient(45deg, #1be5e7, #2571e9);
  border: none;
  color: #fff;
}
.filter-form {
  background: rgba(28, 37, 80, 0.8);
  padding: 20px;
  border-radius: 4px;
}
</style>
